<template>
    <div id="app">
        <div class="login">
            <div class="title">欢迎使用吃了吗点餐管理系统</div>
            <el-form :model="user" label-width="70px">
                <el-form-item label="用户名：">
                    <el-input v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="user.password" type="password"></el-input>
                </el-form-item>
                <div class="button-wrapper">
                    <el-button @click="login" type="primary">登录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {
        data() {
            return {
                user: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            login() {
                this.$http.post("/api/serve/login", this.user).then((response) => {
                    response = response.data;
                    // eslint-disable-next-line no-console
                    // console.log(response);
                    if(response.code==0){
                        window.location.href="/server";
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'error',
                            customClass: 'alert-shadow'
                        });
                    }
                })
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/base.styl";
    html, body {
        height 100%
    }

    #app {
        overflow hidden

        .login {
            width 400px
            padding 20px
            margin 30px auto
            box-shadow 0 0 30px darkgrey
            border-radius 10px

            .title {
                font-size 20px
                font-weight 700
                text-align center
                padding 50px 0
            }

            .button-wrapper {
                text-align center
            }
        }
    }
</style>
